<template>
  <page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>

  <view class="container">
    
    <!-- 页面标题 -->
<wd-search placeholder="请输入订单号/订单名称" cancel-txt="搜索" light />


    <!-- 第一行：订单状态标签 -->
    <!-- <view class="tab-container">
      <view class="tab-item" v-for="(tab, index) in tabs" :key="index" :class="{ active: currentTab === index }"
        @click="switchTab(index)">
        <text class="tab-text">{{ tab.name }}</text>
        <view class="tab-badge" v-if="tab.count > 0">{{ tab.count }}</view>
      </view>
    </view> -->

    <wd-tabs v-model="tab" @change="handleChange" auto-line-width>
  <block v-for="item in tabs" :key="item">
    <wd-tab :title="`${item}`" :name="item">
    </wd-tab>
  </block>
</wd-tabs>

	<view class="pd">
    <orderItems :orderList="orders" type="read" /></view>
    
  </view>
</template>

<script setup>
import { useFontSizeStore } from '@/stores/fontSizeStore';
const fontSizeStore = useFontSizeStore();
import {
  useRouter
} from 'uni-mini-router'

// 路由实例 - 保留原逻辑
const router = useRouter();

import { onLoad } from '@dcloudio/uni-app'
import { ref, computed } from 'vue'
import { volunteer_orderListApi } from "@/api/volunteer"
import { get_pay_status_text, get_status_config,get_order_status_list } from '@/utils/enmuText';


// 标签页数据
// const tabs = ref(get_order_status_list())
const tabs = ref(['全部', '待付款', '已退回','已完成'])
const tab = ref('Design')

// 当前选中的标签索引
const currentTab = ref(0)

// 搜索关键词
const searchKeyword = ref('')

// 订单数据
const orders = ref([])

// 加载状态
const isLoading = ref(true)

const handleChange=({index})=>{
      if (currentTab.value !== index) {
    currentTab.value = index
    isLoading.value = true
    // 模拟切换标签重新加载数据
    setTimeout(() => {
      loadOrders({id:1})
    }, 500)
  }
}

// 商品图片列表（模拟）
const productImages = ref([
  '/static/images/products/ac-repair.jpg',
  '/static/images/products/fridge-repair.jpg',
  '/static/images/products/washing-machine.jpg',
  '/static/images/products/tv-repair.jpg',
  '/static/images/products/oven-repair.jpg'
])

// 服务名称列表（模拟）
const serviceNames = ref([
  '空调维修保养服务',
  '冰箱故障检测与维修',
  '洗衣机清洗与维修',
  '电视安装调试服务',
  '油烟机清洗服务',
  '热水器安装维修',
  '微波炉维修服务'
])

// 根据选中的标签过滤订单（计算属性）
const filteredOrders = computed(() => {
  const currentStatus = tabs.value[currentTab.value].status
  return orders.value.filter(order => {
    // 状态过滤
    const statusMatch = order.status === currentStatus
    // 搜索过滤（仅做展示）
    const searchMatch = true

    return statusMatch && searchMatch
  })
})

const navigationUrl = (order) => {
  router.push({
    name: "common_orderDetail",
    params: {
      id: order.id
    }
  })
}

// 页面显示时加载数据（生命周期钩子）
onLoad((options) => {
  loadOrders(options)
})

// 切换标签页
const switchTab = (index) => {
  if (currentTab.value !== index) {
    currentTab.value = index
    isLoading.value = true
    // 模拟切换标签重新加载数据
    setTimeout(() => {
      loadOrders()
    }, 500)
  }
}

// 加载订单数据
const loadOrders = (options) => {
  isLoading.value = true

  volunteer_orderListApi({
    id: options.id || 1
  }).then((res) => {
    const mockOrders = []
    if (res.code == 200) {
      const currentStatus = tabs.value[currentTab.value].status
      const statusConfig = get_status_config(currentStatus)

      res.data.forEach((item) => {
        mockOrders.push({
          ...item,
          statusText: statusConfig.text,
          statusClass: statusConfig.class,
          payStatusText: get_pay_status_text(item.payStatus),
          payStatusClass: item.payStatus,
        });
      })
      console.log("print:", mockOrders)
      orders.value = [...mockOrders];
      // orders.value = mockOrders
      isLoading.value = false
    }
  })

}


// 生成随机姓名
const getRandomName = () => {
  const lastNames = ['张', '王', '李', '赵', '刘', '陈', '杨', '黄', '周', '吴']
  const firstNames = ['伟', '芳', '娜', '秀英', '敏', '静', '强', '磊', '军', '洋']
  return lastNames[Math.floor(Math.random() * lastNames.length)] +
    firstNames[Math.floor(Math.random() * firstNames.length)]
}

// 生成随机日期
const getRandomDate = () => {
  const date = new Date()
  const days = Math.floor(Math.random() * 30)
  date.setDate(date.getDate() - days)
  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 根据服务类型生成产品型号
const getProductModel = (serviceIndex) => {
  const models = [
    '格力 KFR-35GW/(35592)FNhAa-A1',
    '海尔 BCD-216STPA',
    '西门子 XQG80-WM12L2680W',
    '三星 UA55RU7520JXXZ',
    '老板 CXW-200-26A5S',
    '美的 F6030-JG5(HEY)',
    '格兰仕 G80F23CN3XL-R6K(R4)'
  ]
  return models[serviceIndex] || '通用型号'
}

// 查看订单详情
const deleteOrderItem = (order) => {

}

</script>


<style scoped>
	.pd{
		padding:20rpx;
	}
.container {
  min-height: 100vh;
  padding-bottom: 20rpx;
}

/* 页面标题 */
.page-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  padding: 30rpx 24rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

/* 标签页样式 */
.tab-container {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 0 24rpx;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90rpx;
  position: relative;
}

.tab-item.active {
  color: #1890ff;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4rpx;
  background-color: #1890ff;
}

.tab-text {
  font-size: 28rpx;
  position: relative;
}

.tab-badge {
  position: absolute;
  top: 10rpx;
  right: 30%;
  background-color: #f5222d;
  color: white;
  font-size: 20rpx;
  width: 28rpx;
  height: 28rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 搜索区域样式 */
.search-container {
  padding: 20rpx 24rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 20rpx;
  height: 60rpx;
}

.search-icon {
  color: #999;
  margin-right: 10rpx;
}

.search-input {
  flex: 1;
  font-size: 26rpx;
  color: #333;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
}

/* 订单列表样式 */
.order-list {
  padding: 20rpx 24rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

/* 订单卡片 */
.order-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

/* 订单行通用样式 */
.order-row {
  display: flex;
  width: 100%;
  margin-bottom: 16rpx;
  align-items: center;
}

.order-row:last-child {
  margin-bottom: 0;
}

/* 第一行：订单号和订单状态 */
.row1 {
  justify-content: space-between;
  padding-bottom: 16rpx;
  border-bottom: 1px solid #f5f5f5;
}

.order-no {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

/* 第二行：图片、服务信息和金额 */
.row2 {
  align-items: center;
  gap: 16rpx;
  padding: 10rpx 0;
}

.product-image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 8rpx;
  overflow: hidden;
  background-color: #f5f5f5;
  flex-shrink: 0;
}

.product-image image {
  width: 100%;
  height: 100%;
}

.product-info {
  flex: 1;
  min-width: 0;
}

.service-name {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  margin-bottom: 6rpx;
}

.product-model {
  font-size: 22rpx;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.order-amount {
  flex-shrink: 0;
  text-align: right;
  min-width: 120rpx;
}

.amount-label {
  font-size: 22rpx;
  color: #666;
  display: block;
}

.amount-value {
  font-size: 26rpx;
  color: #f5222d;
  font-weight: 600;
}

/* 第三行：支付状态、订单时间和详情按钮 */
.row3 {
  justify-content: space-between;
  padding-top: 16rpx;
  border-top: 1px solid #f5f5f5;
}

.order-time {
  font-size: 22rpx;
  color: #666;
  margin: 0 10rpx;
  flex: 1;
  text-align: center;
}

/* 状态标签样式 */
.status-tag {
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  font-size: 22rpx;
  color: white;
}

.status-tag.processing {
  background-color: #1890ff;
}

.status-tag.completed {
  background-color: #52c41a;
}

.status-tag.returned {
  background-color: #fa8c16;
}

.status-tag.unknown {
  background-color: #999;
}

/* 支付状态标签样式 */
.pay-tag {
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  font-size: 22rpx;
  white-space: nowrap;
}

.pay-tag.paid {
  background-color: #f6ffed;
  color: #52c41a;
}

.pay-tag.unpaid {
  background-color: #fff1f0;
  color: #f5222d;
}

/* 详情按钮 */
.detail-btn {
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 8rpx 20rpx;
  font-size: 24rpx;
  height: auto;
  line-height: 1;
  white-space: nowrap;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 150rpx 0;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 30rpx;
  color: #ddd;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

/* 加载状态样式 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 150rpx 0;
}

.spinner {
  width: 50rpx;
  height: 50rpx;
  border: 5rpx solid #eee;
  border-top-color: #1890ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
:deep(.wd-search ){
  background-color: #f5f5f5!important;
}
</style>
